<template>
  <div id="floor-box" ref="floorBox">
    <h1 class="title" v-if="layoutModel">{{ layoutModel.Title }}</h1>
    <div class="main-cont">
      <!-- 工具栏 -->
      <v-toolbar @click="handleToolClick"></v-toolbar>
      <div class="table-cont mt10">
        <div class="nav-list">
          <div class="list-header">
            <ul>
              <li>楼层名称</li>
              <li>楼层ID</li>
              <li>楼层类型</li>
              <li>设置</li>
            </ul>
          </div>
          <div class="list-cont" :style="{ height: `${height}px` }" v-loading="listLoading">
            <div class="item"
            v-for="(item, index) in floorList"
            :key="index"
            v-dragging="{ item:item, list:floorList, group:null }">
                <ul>
                  <li>{{ item.Title }}</li>
                  <li>{{ item.Id }}</li>
                  <li>{{ getFloorType(item.Type) }}</li>
                  <li>
                    <el-button
                      @click.native.prevent="editFloor(item)"
                      type="text"
                      size="mini">修改</el-button>
                    <el-button
                      @click.native.prevent="deleteFloor(item)"
                      type="text"
                      size="mini">删除</el-button>
                    <el-button
                      @click.native.prevent="setFloor(item)"
                      type="text"
                      size="mini">配置</el-button>
                  </li>
                </ul>
                <div class="child-box">
                  <div
                    class="child-item"
                    v-for="(child, ind) in item.List"
                    :key="ind"
                    v-dragging="{ item:child, list:item.List, group: item.Id, pId:item.Id }">
                    <img v-if="item.Type === 'NowordsMenu'" :src="child.ImageUrl"/>
                    <span v-else> {{ child.Title }}</span>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增/编辑弹窗 -->
    <v-dialog
      :title="editMode === 'ADD' ? '新建楼层':'修改楼层'"
      :isVisible="editDialogShow"
      name="floorDialog"
      @close="closeDialog">
      <template slot="dialog-cont">
        <el-form :model="floorForm" :rules="floorRules" ref="floorForm" class="dialog-main dialogForm">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="楼层名称" prop="Title">
                <el-input v-model.trim="floorForm.Title" placeholder="请输入楼层名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="楼层ID" prop="Id">
                <el-input v-model.trim="floorForm.Id" placeholder="请输入楼层ID" :disabled="editMode === 'ADD' ? false:true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="楼层背景色" prop="Background">
                <el-input v-model="floorForm.Background" placeholder="请输入楼层背景色"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="楼层类型" prop="Type">
                <el-select v-model="floorForm.Type" popper-class="zIndex-popper" placeholder="请选择楼层类型" @change="handleFloorTypeChange">
                  <el-option v-for="(item, index) in floorTypeArr"
                  :key="index"
                  :value="item.value"
                  :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="floorType === 'Ads' || floorType === 'Separator'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="广告宽度" prop="Width">
                  <el-input v-model="floorForm.Width" placeholder="请输入广告宽度"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="广告高度" prop="Height">
                  <el-input v-model="floorForm.Height" placeholder="请输入广告高度"/>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="floorType === 'Icons'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="菜单列数" prop="Columns">
                  <el-select v-model="floorForm.Columns" placeholder="请选择菜单列数" popper-class="zIndex-popper">
                    <el-option value="1" label="每行1列"></el-option>
                    <el-option value="2" label="每行2列"></el-option>
                    <el-option value="3" label="每行3列"></el-option>
                    <el-option value="4" label="每行4列"></el-option>
                    <el-option value="5" label="每行5列"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单行数" prop="Rows">
                  <el-select v-model="floorForm.Rows" placeholder="请选择菜单行数" popper-class="zIndex-popper">
                    <el-option value="1" label="1行"></el-option>
                    <el-option value="2" label="2行"></el-option>
                    <el-option value="3" label="3行"></el-option>
                    <el-option value="4" label="4行"></el-option>
                    <el-option value="5" label="5行"></el-option>
                    <el-option value="6" label="6行"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="floorType === 'NowordsMenu'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="菜单列数" prop="Columns">
                  <el-select v-model="floorForm.Columns" placeholder="请选择菜单列数" popper-class="zIndex-popper">
                    <el-option value="1" label="每行1列"></el-option>
                    <el-option value="2" label="每行2列"></el-option>
                    <el-option value="3" label="每行3列"></el-option>
                    <el-option value="4" label="每行4列"></el-option>
                    <el-option value="5" label="每行5列"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单行数" prop="Rows">
                  <el-select v-model="floorForm.Rows" placeholder="请选择菜单行数" popper-class="zIndex-popper">
                    <el-option value="1" label="1行"></el-option>
                    <el-option value="2" label="2行"></el-option>
                    <el-option value="3" label="3行"></el-option>
                    <el-option value="4" label="4行"></el-option>
                    <el-option value="5" label="5行"></el-option>
                    <el-option value="6" label="6行"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="菜单宽度" prop="Width">
                  <el-input v-model="floorForm.Width" placeholder="请输入菜单宽度"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单高度" prop="Height">
                  <el-input v-model="floorForm.Height" placeholder="请输入菜单高度"/>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <!-- <template v-else-if="floorType === 'RecentUsedMenu'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="菜单列数" prop="Columns">
                  <el-select v-model="floorForm.Columns" placeholder="请选择菜单列数" popper-class="zIndex-popper">
                    <el-option value="1" label="每行1列"></el-option>
                    <el-option value="2" label="每行2列"></el-option>
                    <el-option value="3" label="每行3列"></el-option>
                    <el-option value="4" label="每行4列"></el-option>
                    <el-option value="5" label="每行5列"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单行数" prop="Rows">
                  <el-select v-model="floorForm.Rows" placeholder="请选择菜单行数" popper-class="zIndex-popper">
                    <el-option value="1" label="1行"></el-option>
                    <el-option value="2" label="2行"></el-option>
                    <el-option value="3" label="3行"></el-option>
                    <el-option value="4" label="4行"></el-option>
                    <el-option value="5" label="5行"></el-option>
                    <el-option value="6" label="6行"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template> -->
          <template v-else-if="floorType === 'ListMenu'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="列表分组数" prop="GroupNum">
                  <el-select v-model="floorForm.GroupNum" placeholder="请选择列表分组数"  popper-class="zIndex-popper">
                    <el-option value="1" label="每组1个"></el-option>
                    <el-option value="2" label="每组2个"></el-option>
                    <el-option value="3" label="每组3个"></el-option>
                    <el-option value="4" label="每组4个"></el-option>
                    <el-option value="0" label="不分组"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否显示图标" prop="IsShowIcon">
                  <el-checkbox v-model="isShowIcon" :checked="floorForm.IsShowIcon === '1' ? true:false">显示图标</el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="指示图标" prop="PointImageUrl">
                  <v-upload title="选择指示图标" type="icon" :picUrl="floorForm.PointImageUrl" :size="{width:32, height:32}" @change="handlePicChange"></v-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="floorType === 'BootStrapMenu'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="菜单宽度" prop="Width">
                  <el-input v-model="floorForm.Width" placeholder="请输入菜单宽度"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单高度" prop="Height">
                  <el-input v-model="floorForm.Height" placeholder="请输入菜单高度"/>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="floorType === 'RichText'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="富文本宽度" prop="Width">
                  <el-input v-model="floorForm.Width" placeholder="请输入富文本宽度"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="富文本高度" prop="Height">
                  <el-input v-model="floorForm.Height" placeholder="请输入富文本高度"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="背景图" prop="BgImageUrl">
                  <v-upload title="选择背景图" type="bgPic" :size="{width:1242, height:300}" :picUrl="floorForm.BgImageUrl" @change="handlePicChange"></v-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="floorType === 'News'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="消息" prop="PointImageUrl">
                  <v-upload title="选择消息图标" type="icon" :size="{width:120, height:90}" :picUrl="floorForm.PointImageUrl" @change="handlePicChange"></v-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="floorType === 'Logout'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="应用链接" prop="Url">
                  <el-input v-model="floorForm.Url" placeholder="请输入应用链接"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="安全退出宽度" prop="Width">
                  <el-input v-model="floorForm.Width" placeholder="请输入安全退出宽度"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="安全退出高度" prop="Height">
                  <el-input v-model="floorForm.Height" placeholder="请输入安全退出高度"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="图标" prop="PointImageUrl">
                  <v-upload title="选择图标" :size="{width:1242, height:90}" type="icon" :picUrl="floorForm.PointImageUrl" @change="handlePicChange"></v-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form>
      </template>
      <template slot="dialog-btns">
        <div class="form-buttons">
          <el-button @click="resetForm('floorForm')" size="mini">重置</el-button>
          <el-button @click="closeDialog('floorDialog')" size="mini">关闭</el-button>
          <el-button type="primary" @click="submitFloorForm" size="mini">确定</el-button>
        </div>
      </template>
    </v-dialog>
    <!-- 配置弹窗 -->
    <v-dialog
      :title="cDialogTit"
      :isVisible="isConfigShow"
      name="configDialog"
      @close="closeDialog">
      <template slot="dialog-cont">
        <!-- 配置广告/菜单/文章 FloorConfig -->
        <template v-if="configParams === 1">
          <el-table :data="materialList"  v-loading="tableLoading" ref="table" class="dialog-main dataTable" @selection-change="handleSelectChange">
            <el-table-column width="auto" label="选择">
              <template slot-scope="scope">
                <el-checkbox :checked="dataIsChecked(scope.row)" @change="handleSelectChange(scope.row, $event)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="ImageUrl" label="图片" width="auto">
              <template slot-scope="scope">
                <img :src="scope.row.ImageUrl"/>
              </template>
            </el-table-column>
            <el-table-column prop="Title" label="名称" width="auto"></el-table-column>
          </el-table>
        </template>
        <!-- 配置栏目分类 -->
        <template v-if="configParams === 2">
          <el-form :model="columeForm" :rules="columeRules" ref="columeForm" class="dialog-main dialogForm">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="栏目标题" prop="SeparatorTitle">
                  <el-input v-model="columeForm.SeparatorTitle" placeholder="请输入栏目标题"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="栏目副标题">
                  <el-input v-model="columeForm.SeparatorSubTitle" placeholder="请输入栏目标题"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="栏目链接">
                  <el-select v-model="columeForm.ContentType" popper-class="zIndex-popper" placeholder="请选择栏目链接">
                    <el-option value="" label="请选择栏目链接"></el-option>
                    <el-option value="H" label="H5链接"></el-option>
                    <el-option value="V" label="视图链接"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="H5链接" prop="Url" v-if="columeForm.ContentType === 'H'">
                  <el-input v-model="columeForm.Url" placeholder="请输入H5链接"/>
                </el-form-item>
                <el-form-item label="视图链接" prop="ContentLayoutId" v-else-if="columeForm.ContentType === 'V'">
                  <el-select v-model="columeForm.ContentLayoutId" placeholder="请选择布局视图" popper-class="zIndex-popper">
                    <el-option v-for="item in layoutTypeArr"
                    :key="item.Id"
                    :value="item.Id"
                    :label="item.Title"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="背景图片" prop="ImageUrl">
                  <v-upload title="选择背景图" type="pic" :picUrl="columeForm.ImageUrl" @change="handlePicChange"></v-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
        <!-- 配置富文本 -->
        <template v-if="configParams === 3">
          <div class="dialog-main">
            <el-form :model="richTextForm" :rules="richTextRules" ref="richTextForm" class="dialogForm">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="交易接口" prop="Interface">
                    <el-input v-model="richTextForm.Interface" placeholder="请输入交易接口"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="接口参数" prop="Params">
                    <el-input v-model="richTextForm.Params" placeholder="请输入接口参数"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="内容列表Key" prop="ContentListKey">
                    <el-input v-model="richTextForm.ContentListKey" placeholder="请输入内容列表Key"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="类别" prop="AppClass">
                    <el-select v-model="richTextForm.AppClass" placeholder="请选择应用类别" popper-class="zIndex-popper">
                      <el-option value="H" label="H5应用"></el-option>
                      <el-option value="Q" label="轻应用"></el-option>
                      <el-option value="V" label="视图应用"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="交易请求是否需要登录" prop="InterfaceNeedLogin">
                    <el-checkbox v-model="richTextForm.InterfaceNeedLogin">交易请求是否需要登录</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="应用链接" prop="Url" v-if="richTextForm.AppClass === 'H' || richTextForm.AppClass === 'Q'">
                    <el-input v-model="richTextForm.Url" placeholder="请输入应用链接"/>
                  </el-form-item>
                  <!-- <el-form-item label="应用链接" prop="AppUrl" v-if="richTextForm.AppClass === 'Q'">
                    <el-input v-model="richTextForm.AppUrl" placeholder="请输入应用链接"/>
                  </el-form-item> -->
                  <el-form-item label="布局视图" prop="LayoutId" v-if="richTextForm.AppClass === 'V'">
                    <el-select v-model="richTextForm.LayoutId" placeholder="请选择布局视图" popper-class="zIndex-popper">
                      <el-option v-for="item in layoutTypeArr"
                      :key="item.Id"
                      :value="item.Id"
                      :label="item.Title">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="应用是否需要登录" prop="IsLogin" v-if="richTextForm.AppClass === 'H' || richTextForm.AppClass === 'Q'">
                    <el-checkbox v-model="richTextForm.IsLogin">需要登录</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="richTextForm.AppClass === 'Q'">
                  <el-form-item label="应用上传" prop="AppUrl">
                    <v-upload title="应用上传" type="appUrl" showType="w" :picUrl="richTextForm.AppUrl" @change="handlePicChange"></v-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="24">
                  <el-form-item label="内容列表" prop="ContentList">
                    <el-input type="textarea" rows="8" v-model="richTextForm.ContentList" placeholder="请输入内容列表"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <!-- 新建样式 -->
            <div class="style-box">
              <v-toolbar @click="handleToolClick" :buttonsObj="styleButtons"></v-toolbar>
              <el-table :data="rtStyleList"  v-loading="tableLoading" ref="table" class="dataTable">
                <el-table-column label="文字样式" width="auto">
                  <template slot-scope="scope">
                    <span v-if="scope.row.TextProperty">{{scope.row.TextProperty}}</span>
                    <span v-else>undefined</span>
                  </template>
                </el-table-column>
                <el-table-column prop="Frame" label="坐标" width="auto"></el-table-column>
                <el-table-column prop="Type" label="分类" width="auto"></el-table-column>
                <el-table-column prop="AppClass" label="应用类别" width="auto"></el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="editRtStyle(scope.row)"
                      type="text"
                      size="mini">修改</el-button>
                    <el-button
                      @click.native.prevent="deleteRtStyle(scope.row)"
                      type="text"
                      size="mini">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
        <!-- 自定义楼层 -->
        <template v-if="configParams === 4">
          <el-form :model="userDefinedForm" :rules="userDefinedRules" ref="userDefinedForm" class="dialog-main dialogForm">
              <el-form-item label="自定义楼层名称" prop="DefinedName">
                <el-input v-model="userDefinedForm.DefinedName" placeholder="请输入自定义楼层名称"/>
              </el-form-item>
              <el-form-item label="自定义json" prop="ContentJson">
                <el-input type="textarea" rows="8" v-model="userDefinedForm.ContentJson" placeholder="请输入自定义json"/>
              </el-form-item>
          </el-form>
        </template>
      </template>
      <template slot="dialog-btns">
        <div class="form-buttons">
          <el-button @click="closeDialog('configDialog')" size="mini">关闭</el-button>
          <el-button type="primary" @click="submitConfigData" size="mini">确定</el-button>
        </div>
      </template>
    </v-dialog>
    <!-- 配置富文本样式 tit 新建样式-->
    <v-dialog
      :title="styleEditMode === 'ADD' ? '新建富文本样式':'修改富文本样式'"
      :isVisible="styleDialogShow"
      name="styleDialog"
      @close="closeDialog">
      <template slot="dialog-cont">
        <el-form :model="rtStyleForm" :rules="rtStyleRules" ref="rtStyleForm" class="dialog-main dialogForm">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="坐标" prop="Frame">
                <el-input v-model="rtStyleForm.Frame" placeholder="请输入坐标"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类" prop="Type">
                <el-select v-model="rtStyleForm.Type" popper-class="zIndex-popper" placeholder="请选择分类">
                  <el-option value="P" label="图片"></el-option>
                  <el-option value="W" label="文字"></el-option>
                  <el-option value="B" label="进度条"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="应用类别" prop="AppClass">
                <el-select v-model="rtStyleForm.AppClass" placeholder="请选择应用类别" popper-class="zIndex-popper">
                  <el-option value="H" label="H5应用"></el-option>
                  <el-option value="Q" label="轻应用"></el-option>
                  <el-option value="V" label="视图应用"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要登录" prop="IsLogin">
                <el-checkbox v-model="rtStyleForm.IsLogin">需要登录</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="rtStyleForm.Type === 'W' || rtStyleForm.Type === 'B'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="文字样式" prop="TextProperty">
                  <el-input v-model="rtStyleForm.TextProperty" placeholder="请输入文字样式设置"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="应用链接"  prop="Url" v-if="rtStyleForm.AppClass === 'H' || rtStyleForm.AppClass === 'Q'">
                  <el-input v-model="rtStyleForm.Url" placeholder="请输入应用链接"/>
                </el-form-item>
                <el-form-item label="布局视图" prop="ContentLayoutId" v-if="rtStyleForm.AppClass === 'V'">
                  <el-select v-model="rtStyleForm.ContentLayoutId" placeholder="请选择布局视图" popper-class="zIndex-popper">
                    <el-option v-for="item in layoutTypeArr"
                    :key="item.Id"
                    :value="item.Id"
                    :label="item.Title">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="应用上传" prop="AppUrl" v-if="rtStyleForm.AppClass === 'Q'">
                  <v-upload title="应用上传" type="appUrl" showType="w" :picUrl="rtStyleForm.AppUrl" @change="handlePicChange"></v-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="rtStyleForm.Type === 'P'">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="图片路径设置" prop="UrlSeting">
                  <el-select v-model="rtStyleForm.UrlSeting" popper-class="zIndex-popper" placeholder="请选择分类">
                    <el-option value="select" label="选择"></el-option>
                    <el-option value="input" label="输入"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="应用链接"  prop="Url" v-if="rtStyleForm.AppClass === 'H' || rtStyleForm.AppClass === 'Q'">
                  <el-input v-model="rtStyleForm.Url" placeholder="请输入应用链接"/>
                </el-form-item>
                <el-form-item label="布局视图" prop="ContentLayoutId" v-if="rtStyleForm.AppClass === 'V'">
                  <el-select v-model="rtStyleForm.ContentLayoutId" placeholder="请选择布局视图" popper-class="zIndex-popper">
                    <el-option v-for="item in layoutTypeArr"
                    :key="item.Id"
                    :value="item.Id"
                    :label="item.Title">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="应用上传" prop="AppUrl" v-if="rtStyleForm.AppClass === 'Q'">
                  <v-upload title="应用上传" type="appUrl" showType="w" :picUrl="rtStyleForm.AppUrl" @change="handlePicChange"></v-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="图片" prop="ImageUrl">
                  <el-input v-model="rtTxtUrl" placeholder="请输入图片地址信息" v-if="rtStyleForm.UrlSeting === 'input'"/>
                  <v-upload title="选择图片" type="pic" :picUrl="rtStyleForm.ImageUrl" @change="handlePicChange" v-else></v-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form>
      </template>
      <template slot="dialog-btns">
        <div class="form-buttons">
          <el-button @click="resetForm('rtStyleForm')" size="mini">重置</el-button>
          <el-button @click="closeDialog('styleDialog')" size="mini">关闭</el-button>
          <el-button type="primary" @click="submitRtStyleForm" size="mini">确定</el-button>
        </div>
      </template>
    </v-dialog>
  </div>
</template>
<script>
import VToolbar from '../../comm/iToolbar/iToolbar'
import VDialog from '../../comm/iDialog/iDialog'
import VUpload from '../../comm/iUpload/iUpload'
import { checkColor } from '../../js/rules'
import api from '../../../../api/url'
import ajax from '../../../../api/ajax/ajax'
export default {
  name: 'floorManage',
  components: {
    VToolbar,
    VDialog,
    VUpload
  },
  data () {
    return {
      editMode: 'ADD',
      editDialogShow: false,
      height: null,
      listLoading: true,
      layoutId: '',
      layoutModel: null,
      floorType: '',
      floorTypeArr: [
        {
          label: '广告',
          value: 'Ads' // 1
        },
        {
          label: '菜单',
          value: 'Icons' // 2
        },
        {
          label: '无文字菜单',
          value: 'NowordsMenu' // 3
        },
        {
          label: '列表菜单',
          value: 'ListMenu' // 4
        },
        {
          label: '栅格菜单',
          value: 'BootStrapMenu' // 5
        },
        /* { // no
          label: '最近使用',
          value: 'RecentUsedMenu' // 6
        }, */
        {
          label: '文章',
          value: 'Articles' // 7
        },
        {
          label: '栏目分类',
          value: 'Separator' // 8
        },
        {
          label: '富文本',
          value: 'RichText' // 9
        },
        {
          label: '消息',
          value: 'News' // 10
        }/* ,
        { // no
          label: '安全退出',
          value: 'Logout' // 11
        },
        { // no
          label: '自定义',
          value: 'UserDefined' // 12
        } */
      ],
      floorList: [],
      sortFloorList: [],
      floorModel: {},
      floorForm: {
        Title: '',
        Id: '',
        Type: '',
        Width: '',
        Height: '',
        Columns: '',
        Rows: '',
        GroupNum: '',
        PointImageUrl: '',
        Url: ''
      },
      floorData: {}, // 正在编辑的楼层数据
      floorRules: {
        Title: [
          { required: true, message: '楼层名称不能为空', trigger: 'blur' }
        ],
        Id: [
          { required: true, message: '楼层ID不能为空', trigger: 'blur' }
        ],
        Type: [
          { required: true, message: '请选择楼层类型', trigger: 'change' }
        ],
        Width: [
          { required: true, message: '请输入宽度', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '宽度必须为数值', trigger: 'blur' }
        ],
        Height: [
          { required: true, message: '请输入高度', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '高度必须为数值', trigger: 'blur' }
        ],
        Columns: [
          { required: true, message: '请选择菜单列数', trigger: 'change' }
        ],
        Rows: [
          { required: true, message: '请选择菜单行数', trigger: 'change' }
        ],
        GroupNum: [
          { required: true, message: '列表分组不能为空', trigger: 'blur' }
        ],
        PointImageUrl: [
          { required: true, message: '请选择图标', trigger: 'change' }
        ],
        Url: [
          { required: true, message: '应用链接不能为空', trigger: 'blur' }
        ],
        Background: [
          { validator: checkColor, trigger: 'blur' }
        ]
      },
      isShowIcon: false,
      isConfigShow: false,
      cDialogTit: '配置列表菜单',
      configParams: 0,
      materialList: [], // 素材列表
      tableLoading: false,
      selConfigList: [], // 选中的配置列表
      columeForm: {},
      columeRules: {
        /* SeparatorTitle: [
          { required: true, message: '栏目标题不能为空', trigger: 'blur' }
        ], */
        Url: [
          { required: true, message: 'H5链接不能为空', trigger: 'change' }
        ],
        ContentLayoutId: [
          { required: true, message: '视图链接不能为空', trigger: 'change' }
        ]
      },
      layoutTypeArr: [], // 布局视图
      richTextForm: {},
      richTextRules: {
        ContentList: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      },
      rtStyleList: [],
      styleEditMode: 'ADD',
      styleDialogShow: false,
      rtTxtUrl: '',
      rtStyleForm: {
        UrlSeting: 'select',
        Type: 'P',
        AppClass: 'H'
      },
      rtStyleData: {},
      rtStyleRules: {
        Frame: [
          { required: true, message: '坐标不能为空', trigger: 'blur' }
        ],
        Type: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        AppClass: [
          { required: true, message: '请选择应用类别', trigger: 'change' }
        ],
        TextProperty: [
          { required: true, message: '文字样式不能为空', trigger: 'blur' }
        ]
      },
      styleButtons: [
        { text: '新建样式', oprType: 'addStyle' }
      ],
      userDefinedForm: {}, // 自定义表单
      userDefinedRules: {
        DefinedName: [
          { required: true, message: '自定义楼层名称不能为空', trigger: 'blur' }
        ],
        ContentJson: [
          { required: true, message: '自定义json不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 工具栏操作
    handleToolClick (oprType) {
      switch (oprType) {
        case 'add':
          this.addFloor()
          break
        case 'addStyle':
          this.addRtStyle()
          break
        default:
          break
      }
    },
    // 获取布局详情
    getLayoutDetails () {
      let getData = {
        id: this.layoutId
      }
      ajax.get(api.QUERY_LAYOUT_DETAILS, getData).then(res => {
        this.layoutModel = res
        this.getLayoutType()
      })
    },
    // 获取布局类型
    getLayoutType () {
      ajax.get(api.QUERY_LAYOUT_LIST).then(res => {
        this.layoutTypeArr = res
      })
    },
    // 处理楼层类型
    handleFloorTypeChange (val) {
      // this.$refs.floorForm.clearValidate()
      this.floorType = val
    },
    // 获取楼层列表
    getFloorList () {
      let getData = {
          layoutid: this.layoutId
      }
      ajax.get(api.QUERY_FLOOR_LIST, getData).then(res => {
        if (res && res.length > 0) {
          this.floorList = res
        } else {
          this.floorList = []
        }
        this.listLoading = false
      })
    },
    // 过滤楼层类型
    getFloorType (val) {
      switch (val) {
        case 'Ads': {
          return '广告'
        }
        case 'Icons': {
          return '菜单'
        }
        case 'Articles': {
          return '文章'
        }
        case 'Separator': {
          return '栏目分类'
        }
        case 'NowordsMenu': {
          return '无文字菜单'
        }
        case 'ListMenu': {
          return '列表菜单'
        }
        case 'BootStrapMenu': {
          return '栅格菜单'
        }
        case 'RichText': {
          return '富文本'
        }
        case 'News': {
          return '消息'
        }
        case 'Logout': {
          return '安全退出'
        }
        case 'UserDefined': {
          return '自定义'
        }
      }
    },
    // 查询素材之广告列表
    getAdList () {
      this.materialList = []
      ajax.get(api.QUERY_AD_LIST).then(res => {
        this.materialList = res
      })
    },
    // 查询素材之文章列表
    getArticleList () {
      ajax.get(api.QUERY_ARTICLE_LIST).then(res => {
        this.materialList = res
      })
    },
    // 查询素材之应用列表
    getAppList () {
      ajax.get(api.QUERY_APP_LIST).then(res => {
        if (res.Code === 0) {
          this.materialList = res.Apps
        }
      })
    },
    // 获取富文本样式列表
    getRtStyleList () {
      ajax.get(api.QUERY_RT_STYLE_LIST + '?id=' + this.floorModel.Id).then(res => {
        if (res.Code === 0) {
          this.rtStyleList = res.RichTextStyles
        }
      })
    },
    // 新增富文本样式
    addRtStyle () {
      this.styleEditMode = 'ADD'
      this.styleDialogShow = true
    },
    // 编辑富文本样式
    editRtStyle (data) {
      this.styleEditMode = 'EDIT'
      this.rtStyleForm = JSON.parse(JSON.stringify(data))
      this.rtStyleData = JSON.parse(JSON.stringify(data))
      this.rtTxtUrl = this.rtStyleForm.ImageUrl
      if (this.rtStyleForm.IsLogin === '1') {
        this.rtStyleForm.IsLogin = true
      } else {
        this.rtStyleForm.IsLogin = false
      }
      this.styleDialogShow = true
      this.$nextTick(() => {
        this.$refs.rtStyleForm.clearValidate()
      })
    },
    // 删除富文本样式
    deleteRtStyle (data) {
      this.$confirm('确定要删除该样式吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let rmdata = {
          id: data.Id,
          richtextid: this.floorModel.Id
        }
        ajax.get(api.DELETE_RT_STYLE, rmdata).then(res => {
          if (res.Code === 0) {
            this.$message({
              type: 'success',
              message: '样式删除成功'
            })
            this.getRtStyleList()
          }
        }).catch(() => {})
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取富文本样式详情
    getRtStyleDetails (id) {
      let getData = {
        id: id
      }
      ajax.post(api.QUERY_RT_STYLE_DETAILS, getData).then(res => {
        console.log(res)
      })
    },
    // 提交新增/修改富文本样式
    submitRtStyleForm () {
      this.$refs.rtStyleForm.validate((valid) => {
        if (valid) {
          let postData = Object.assign(this.rtStyleForm, {
            RichTextId: this.floorModel.Id
          })
          if (postData.IsLogin) {
            postData.IsLogin = '1'
          } else {
            postData.IsLogin = '0'
          }
          if (postData.UrlSeting === 'input') {
            postData.ImageUrl = this.rtTxtUrl
          }
          if (this.styleEditMode === 'ADD') {
            ajax.post(api.ADD_RT_STYLE, postData).then(res => {
              if (res.Code === 0) {
                this.$message({
                  type: 'success',
                  message: '富文本有样式创建成功'
                })
                this.rtStyleForm = {
                  UrlSeting: 'select',
                  Type: 'P',
                  AppClass: 'H'
                }
                this.getRtStyleList()
                this.closeDialog('styleDialog')
              }
            })
          } else {
            ajax.post(api.MODIFY_RT_STYLE, postData).then(res => {
              if (res.Code === 0) {
                this.$message({
                  type: 'success',
                  message: '富文本有样式修改成功'
                })
                this.rtStyleForm = {
                  UrlSeting: 'select',
                  Type: 'P',
                  AppClass: 'H'
                }
                this.getRtStyleList()
                this.closeDialog('styleDialog')
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 判断数据是否选中
    dataIsChecked (data) {
      let Id = data.Id.toString()
      if (this.selConfigList.includes(Id)) {
        return true
      }
    },
    // 选择配置列表
    handleSelectChange (data, checked) {
      if (checked) {
        this.selConfigList.splice(this.selConfigList.length - 1, 0, data.Id.toString())
      } else {
        let index = this.selConfigList.indexOf(data.Id.toString())
        this.selConfigList.splice(index, 1)
      }
    },
    // 提交配置数据
    submitConfigData () {
      let type = this.floorModel.Type
      switch (type) {
          case 'Ads':
            this.submitConfigList()
            break
          case 'Icons':
            this.submitConfigList()
            break
          case 'NowordsMenu':
            this.submitConfigList()
            break
          case 'ListMenu':
            this.submitConfigList()
            break
          case 'BootStrapMenu':
            this.submitConfigList()
            break
          case 'Articles':
            this.submitConfigList()
            break
          case 'Separator':
            this.submitColCate()
            break
          case 'RichText':
            this.submitRTextData()
            break
          case 'News':
            this.submitConfigList()
            break
          case 'UserDefined':
            this.submitCustomForm()
            break
          default:
            break
        }
    },
    // 配置栏目分类
    submitColCate () {
      this.$refs.columeForm.validate((valid) => {
        if (valid) {
          let postData = Object.assign({}, this.floorModel, this.columeForm)
          ajax.post(api.CONFIG_FLOOR + '?type=' + this.floorModel.Type, postData).then(res => {
            if (res.Code === 0) {
              this.$message({
                type: 'success',
                message: '栏目分类配置成功'
              })
              this.selConfigList = []
              this.floorModel = {}
              this.columeForm = {}
              this.closeDialog('configDialog')
              this.getFloorList()
            }
          })
        } else {
          return false
        }
      })
    },
    // 配置富文本
    submitRTextData () {
      this.$refs.richTextForm.validate((valid) => {
        if (valid) {
          let postData = Object.assign({}, this.floorModel, this.richTextForm)
          if (postData.InterfaceNeedLogin) {
            postData.InterfaceNeedLogin = '1'
          } else {
            postData.InterfaceNeedLogin = '0'
          }
          if (postData.IsLogin) {
            postData.IsLogin = '1'
          } else {
            postData.IsLogin = '0'
          }
          ajax.post(api.CONFIG_FLOOR + '?type=' + this.floorModel.Type, postData).then(res => {
            if (res.Code === 0) {
              this.$message({
                type: 'success',
                message: '富文本配置成功'
              })
              this.selConfigList = []
              this.floorModel = {}
              // this.richTextForm = {}
              this.resetForm('richTextForm')
              this.closeDialog('configDialog')
              this.getFloorList()
            }
          })
        } else {
          return false
        }
      })
    },
    // 配置-自定义
    submitCustomForm () {
      this.$refs.userDefinedForm.validate((valid) => {
        if (valid) {
          let postData = Object.assign({}, this.floorModel, this.userDefinedForm)
          ajax.post(api.CONFIG_FLOOR + '?type=' + this.floorModel.Type, postData).then(res => {
            if (res.Code === 0) {
              this.$message({
                type: 'success',
                message: '自定义楼层成功'
              })
              this.selConfigList = []
              this.floorModel = {}
              this.userDefinedForm = {}
              this.closeDialog('configDialog')
              this.getFloorList()
            }
          })
        } else {
          return false
        }
      })
    },
    // 配置列表菜单
    submitConfigList () {
        let postData = {
          LayoutId: this.layoutId,
          Type: this.floorModel.Type,
          Id: this.floorModel.Id,
          Title: this.floorModel.Title,
          Background: this.floorModel.Background,
          IdList: this.selConfigList
        }
        let ConfigFloorType = this.floorModel.Type
        // 菜单需要上传
        if (ConfigFloorType === 'Icons' ||
        ConfigFloorType === 'NowordsMenu') {
            postData.Columns = this.floorModel.Columns
            postData.Rows = this.floorModel.Rows
        }
        // 广告需要上传
        if (ConfigFloorType === 'Ads' ||
        ConfigFloorType === 'NowordsMenu' ||
        ConfigFloorType === 'BootStrapMenu') {
            postData.ImageSize = this.floorModel.ImageSize
        }
        // 列表菜单
        if (ConfigFloorType === 'ListMenu') {
            postData.GroupNum = this.floorModel.GroupNum
            postData.PointImageUrl = this.floorModel.PointImageUrl
            postData.IsShowIcon = this.floorModel.IsShowIcon
        }
        // 消息
        if (ConfigFloorType === 'News') {
            postData.PointImageUrl = this.floorModel.PointImageUrl
        }
        ajax.post(api.CONFIG_FLOOR + '?type=' + this.floorModel.Type, postData).then(res => {
          if (res.Code === 0) {
            this.$message({
              type: 'success',
              message: '楼层配置成功'
            })
            this.closeDialog('configDialog')
            this.getFloorList()
          }
        })
    },
    // 新增楼层
    addFloor () {
      this.floorType = ''
      this.editMode = 'ADD'
      this.editDialogShow = true
    },
    // 编辑楼层
    editFloor (data) {
      this.floorData = JSON.parse(JSON.stringify(data))
      let formData = JSON.parse(JSON.stringify(data))
      this.editMode = 'EDIT'
      this.floorType = formData.Type
      this.floorForm = Object.assign(this.floorForm, formData)
      if (formData.Type === 'Ads' ||
      formData.Type === 'NowordsMenu' ||
      formData.Type === 'BootStrapMenu' ||
      formData.Type === 'Separator' ||
      formData.Type === 'RichText' ||
      formData.Type === 'Logout') {
        this.floorForm.Width = formData.ImageSize.Width
        this.floorForm.Height = formData.ImageSize.Height
      }
      this.editDialogShow = true
      this.$nextTick(() => {
        this.$refs.floorForm.clearValidate()
      })
    },
    // 删除楼层
    deleteFloor (data) {
      this.$confirm('确定要删除该楼层吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let rmdata = {
          id: data.Id
        }
        ajax.get(api.DELETE_FLOOR, rmdata).then(res => {
          if (res.Code === 0) {
            this.$message({
              type: 'success',
              message: '楼层删除成功'
            })
            this.getFloorList()
          }
        }).catch(() => {})
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 楼层配置
    setFloor (data) {
      if (data.Type === 'Ads' ||
      data.Type === 'Icons' ||
      data.Type === 'Articles' ||
      data.Type === 'NowordsMenu' ||
      data.Type === 'ListMenu' ||
      data.Type === 'News' ||
      data.Type === 'BootStrapMenu') { // 类型为广告/菜单/文章/无文字菜单/列表菜单/消息/栅格菜单
        this.configParams = 1
        this.cDialogTit = '配置列表菜单'
        this.isConfigShow = true
      } else if (data.Type === 'Separator') { // 类型为栏目分类
        this.configParams = 2
        this.cDialogTit = '配置栏目分类'
        this.isConfigShow = true
      } else if (data.Type === 'RichText') { // 类型为富文本
        this.configParams = 3
        this.cDialogTit = '配置富文本'
        this.isConfigShow = true
      } else if (data.Type === 'UserDefined') { // 类型为自定义
        this.configParams = 4
        this.cDialogTit = '自定义楼层'
        this.isConfigShow = true
      } else if (data.Type === 'Logout') { // 类型为安全退出/最近使用
        this.configParams = 0
        this.$alert('暂无配置功能')
      }
      if (this.configParams !== 0) {
        let getData = {
          id: data.Id
        }
        ajax.get(api.QUERY_FLOOR_DETAILS, getData).then(res => {
          this.floorModel = res
          this.floorType = res.Type
          if (this.floorModel.IdList && this.floorModel.IdList.length > 0) {
            this.selConfigList = this.floorModel.IdList
          }
          switch (data.Type) {
            case 'Ads':
              this.getAdList()
              break
            case 'Icons':
              this.getAppList()
              break
            case 'NowordsMenu':
              this.getAppList()
              break
            case 'ListMenu':
              this.getAppList()
              break
            case 'BootStrapMenu':
              this.getAppList()
              break
            case 'Articles':
              this.getArticleList()
              break
            case 'Separator':
              this.columeForm = this.floorModel
              break
            case 'RichText':
              this.richTextForm = this.floorModel
              if (this.richTextForm.InterfaceNeedLogin === '1') {
                this.richTextForm.InterfaceNeedLogin = true
              } else {
                this.richTextForm.InterfaceNeedLogin = false
              }
              if (this.richTextForm.IsLogin === '1') {
                this.richTextForm.IsLogin = true
              } else {
                this.richTextForm.IsLogin = false
              }
              this.getRtStyleList()
              break
            case 'News':
              this.getArticleList()
              break
            case 'UserDefined':
              this.userDefinedForm = this.floorModel
              break
            default:
              break
          }
        })
      }
    },
    // 楼层排序
    resortFloor (data) {
      let postData = {
        'SortIds': JSON.stringify({
          Servers: data
        }),
        'LayoutId': this.layoutId
      }
      ajax.post(api.SORT_FLOOR, postData).then(res => {
        if (res.Code === 0) {
          this.sortFloorList = []
        }
      })
    },
    // 关闭弹窗
    closeDialog (name) {
      switch (name) {
        case 'floorDialog':
          this.initForm('floorForm')
          this.editDialogShow = false
          break
        case 'configDialog':
          this.materialList = []
          this.selConfigList = []
          this.floorModel = {}
          this.isConfigShow = false
          break
        case 'styleDialog':
          this.initForm('rtStyleForm')
          this.styleDialogShow = false
          break
        default:
          break
      }
    },
    // 提交表单
    submitFloorForm () {
      this.$refs.floorForm.validate((valid) => {
        if (valid) {
          let formData = JSON.parse(JSON.stringify(this.floorForm))
          formData.LayoutId = this.layoutId
          if (formData.Type === 'Ads' ||
            formData.Type === 'NowordsMenu' ||
            formData.Type === 'BootStrapMenu' ||
            formData.Type === 'Separator' ||
            formData.Type === 'RichText' ||
            formData.Type === 'Logout') {
            formData.ImageSize = {}
            formData.ImageSize.Width = formData.Width.toString()
            formData.ImageSize.Height = formData.Height.toString()
          }
          if (this.isShowIcon) {
            formData.IsShowIcon = '1'
          } else {
            formData.IsShowIcon = '0'
          }
          if (this.editMode === 'ADD') {
            ajax.post(api.ADD_FLOOR, formData).then(res => {
              if (res.Code === 0) {
                this.$message({
                  type: 'success',
                  message: '楼层创建成功'
                })
                this.closeDialog('floorDialog')
                this.getFloorList()
              }
            })
          } else {
            if (formData.IdList !== undefined && formData.IdList !== '') {
              formData.List = null
            }
            ajax.post(api.MODIFY_FLOOR + '?type=' + this.floorType + '&id=' + this.floorForm.Id, formData).then(res => {
              if (res.Code === 0) {
                this.$message({
                  type: 'success',
                  message: '楼层修改成功'
                })
                this.closeDialog('floorDialog')
                this.getFloorList()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm (formName) {
      if (formName === 'floorForm') {
        this.initForm('floorForm')
        if (this.editMode === 'EDIT') {
          this.floorForm = { ...this.floorData }
          this.floorType = this.floorForm.Type
        }
      } else if (formName === 'rtStyleForm') {
        this.initForm('rtStyleForm')
        if (this.styleEditMode === 'EDIT') {
          this.rtStyleForm = { ...this.rtStyleData }
          if (this.rtStyleForm.IsLogin === '1') {
            this.rtStyleForm.IsLogin = true
          } else {
            this.rtStyleForm.IsLogin = false
          }
        }
      }
    },
    // 初始化表单
    initForm (formName) {
      this.$refs[formName].resetFields()
      if (formName === 'floorForm') {
        this.floorForm = {
          Title: '',
          Id: '',
          Type: '',
          Width: '',
          Height: '',
          Columns: '',
          Rows: '',
          GroupNum: '',
          PointImageUrl: '',
          Url: ''
        }
        this.floorType = ''
        this.isShowIcon = false
      } else if (formName === 'rtStyleForm') {
        this.rtStyleForm = {
          UrlSeting: 'select',
          Type: 'P',
          AppClass: 'H',
          IsLogin: false
        }
      }
    },
    // 选择素材
    handlePicChange (data) {
      switch (data.type) {
        case 'icon':
          if (this.floorType === 'Separator') {
            this.columeForm.PointImageUrl = data.url
          } else if (this.floorType === 'RichText') {
            this.richTextForm.PointImageUrl = data.url
          } else {
            this.floorForm.PointImageUrl = data.url
          }
          break
        case 'bgPic':
          if (this.floorType === 'Separator') {
            this.columeForm.BigImageUrl = data.url
          } else if (this.floorType === 'RichText') {
            this.richTextForm.BigImageUrl = data.url
          } else {
            this.floorForm.BigImageUrl = data.url
          }
          break
        case 'pic':
          if (this.floorType === 'Separator') {
            this.columeForm.ImageUrl = data.url
          } else if (this.floorType === 'RichText') {
            this.rtStyleForm.ImageUrl = data.url
          } else {
            this.floorForm.ImageUrl = data.url
          }
          break
        case 'appUrl':
          this.rtStyleForm.AppUrl = data.url
          break
        default:
          break
      }
    }
  },
  created () {
    this.layoutId = this.$route.query.id
    this.$nextTick(() => {
      this.height = this.$refs.floorBox.offsetHeight - 187
      this.getLayoutDetails()
      this.getFloorList()
    })
  },
  mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      this.sortFloorList = JSON.parse(JSON.stringify(value))
    })
    this.$dragging.$on('dragend', () => {
      let data = this.sortFloorList.item
      let pId = this.sortFloorList.pId
      let sortList = JSON.parse(JSON.stringify(this.sortFloorList.list))
      let postData = []
      if (data.LayoutId) {
        postData = sortList.map(fitem => {
          let childIds = []
          if (fitem.List !== undefined && fitem.List !== null && fitem.List.length > 0) {
            childIds = fitem.List.map(item => {
              let Id = item.Id.toString()
              return {
                ChildId: Id
              }
            })
          }
          return {
            FloorId: fitem.Id,
            Child: childIds
          }
        })
      } else {
        let tempFloorList = JSON.parse(JSON.stringify(this.floorList))
        let childList = tempFloorList.map((fitem, index) => {
          if (fitem.Id === pId) {
            fitem.List = sortList
            fitem.IdList = sortList.map(sitem => {
              return sitem.Id
            })
          }
          tempFloorList.splice(index, 1, fitem)
          return fitem
        })
        postData = childList.map(fitem => {
          let childIds = []
          if (fitem.List !== undefined && fitem.List !== null && fitem.List.length > 0) {
            childIds = fitem.List.map(item => {
              let Id = item.Id.toString()
              return {
                ChildId: Id
              }
            })
          }
          return {
            FloorId: fitem.Id,
            Child: childIds
          }
        })
      }
      this.resortFloor(postData)
    })
  }
}
</script>
<style lang="stylus">
#floor-box
  height 100%
  overflow hidden
  .title
    height 60px
    padding 15px
    line-height 30px
    font-size 18px
    font-weight normal
    background #fff
  .mt10
    margin-top 10px
  .main-cont
    padding 10px 0 0 10px
  .nav-list
    overflow hidden
    .list-header
    .list-cont
      overflow auto
      ul
        display table
        width 100%
        border-collapse collapse
        table-layout fixed
        li
          display table-cell
          line-height 24px
          padding 10px
          text-align center
          position relative
    .list-cont
      ul
        li
          &:first-child
            padding-left 40px
            &:before
              content ''
              position absolute
              left 0
              top 50%
              width 40px
              height 40px
              margin -20px 0 0 0
              background url('') no-repeat center
      .child-box
        margin-left 20px
        .child-item
          display block
          line-height 24px
          margin-bottom 5px
          padding 10px 20px 10px 50px
          background #fff
          border-radius 3px
          box-shadow 0 0 5px rgba(245, 245, 245, 0.3)
          position relative
          &:before
            content ''
            position absolute
            left 0
            top 50%
            width 40px
            height 40px
            margin -20px 0 0 0
            background url('') no-repeat center
          img
            display block
            width 30px
            height 30px
    .list-header, .list-cont .item ul
      margin-bottom 5px
      background #fff
      border-radius 3px
      box-shadow 0 0 5px rgba(245, 245, 245, 0.3)
</style>
